<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      /*总容器*/
      .content {
        width: 90%;
        height: 80vh;
        margin: 0 auto;
        position: relative;
        border: 1px solid black;
      }

      /*内容部分*/
      .wrap {
        position: absolute;
        inset: 0;
        margin: 100px auto;
        width: 800px;
        height: 400px;
        border: 1px solid red;
        overflow: hidden;
      }

      .inner {
        width: 100%;
        height: 100%;
        display: none;
        transition: 2s;
      }

      .inneractive {
        display: block;
        transition: 2s;
        opacity: 1;
        animation: move 1s linear 1;
      }

      @keyframes move {
        0% {
          transform: translateX(800px);
          opacity: 0;
        }

        50% {
          transform: translateX(400px);
          opacity: 0.5;
        }

        100% {
          transform: translateX(0px);
          opacity: 1;
        }
      }

      /*分页器部分*/
      .list-wrap {
        position: absolute;
        bottom: 0;
        left: calc(50% - 600px);
        width: 1200px;
        height: 200px;
        border: 1px solid blue;
        overflow: hidden;
        /* overflow-x: scroll; */
      }

      .list {
        width: 3000px;
        height: 100%;
        transition: 2s;
        overflow: hidden;
      }

      .list > li {
        float: left;
        width: 200px;
        height: 100%;
      }

      .listactive {
        width: calc(200px - 20px) !important;
        height: calc(200px - 20px) !important;
        border: 10px solid white !important;
      }

      /*按钮*/
      button {
        width: 47px;
        height: 64px;
        position: absolute;
        border: none;
        top: calc(50% - 32px);
      }

      .btn-prev {
        left: 0;
        transform: rotateZ(180deg);
      }

      .btn-next {
        right: 0;
      }
    </style>
  </head>
  <body bgcolor="black">
    <div class="content">
      <div class="wrap">
        <div
          class="inner inneractive"
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/ico_star_press@2x.png) center center/cover
              no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/ico_star_press@2x.png) center center/cover
              no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/ico_star_press@2x.png) center center/cover
              no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></div>
        <div
          class="inner"
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></div>
      </div>
      <div class="list-wrap">
        <ul class="list">
          <li
            class="listactive"
            style="
              background: url(../img/avatar.png) center center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/ico_star_press@2x.png) center center/90%
                no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/avatar.png) center center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
          <li
            style="
              background: url(../img/defaultInteriorBackgroundBanner.jpg) center
                center/90% no-repeat;
            "
          ></li>
        </ul>
      </div>
      <button
        class="btn-prev"
        style="
          background: url(../img/ico_star_press@2x.png) center center/cover
            no-repeat;
        "
      ></button>
      <button
        class="btn-next"
        style="
          background: url(../img/ico_star_press@2x.png) center center/cover
            no-repeat;
        "
      ></button>
    </div>
    <script>
      //tab切换
      var inner = document.getElementsByClassName("inner"); //内容部分
      var lis = document
        .getElementsByClassName("list")[0]
        .getElementsByTagName("li"); //分页器部分
      for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
          for (var j = 0; j < lis.length; j++) {
            if (lis[j] == this) {
              lis[j].className = "listactive";
              inner[j].className = "inner inneractive";
            } else {
              lis[j].className = "";
              inner[j].className = "inner";
            }
          }
        };
      }
      //点击每一个人物让他分页部分居中
      var list = document.getElementsByClassName("list")[0];
      var prev = document.getElementsByClassName("btn-prev")[0];
      var next = document.getElementsByClassName("btn-next")[0];
      //初始值
      var index = 0;
      //点击切换角色
      for (var i = 0; i < lis.length; i++) {
        //点击的当前索引进行存储 存在li上
        lis[i].setAttribute("index", i);
        //给li绑定事件
        lis[i].addEventListener("click", function () {
          //拿到我们刚才存储的索引值
          index = this.getAttribute("index");
          //判断点击时让ul始终保持在显示第三个li的位置
          if (index > 2 && index < lis.length - 3) {
            list.style.transform = `translateX(${(index - 2) * -200}px)`;
          } else if (index <= 2) {
            list.style.transform = `translateX(${0}px)`;
          } else if (index >= lis.length - 3) {
            list.style.transform = `translateX(${(lis.length - 6) * -200}px)`;
          }
        });
      }
      //右点击
      next.addEventListener("click", function () {
        if (index < lis.length) {
          index++;
        }
        index = index < lis.length ? index : lis.length - 1;
        //角色复位操作
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
          inner[j].className = "inner";
        }
        lis[index].className = "listactive";
        inner[index].className = "inner inneractive";
        //移动ul
        if (index > 2 && index < lis.length - 3) {
          list.style.transform = `translateX(${(index - 2) * -200}px)`;
        }
      });
      //左点击
      prev.addEventListener("click", function () {
        index = index > 0 ? index : 1;
        index--;
        //角色复位操作
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
          inner[j].className = "inner";
        }
        lis[index].className = "listactive";
        inner[index].className = "inner inneractive";
        //移动ul
        if (index > 1 && index < lis.length - 3) {
          list.style.transform = `translateX(${(index - 2) * -200}px)`;
        }
      });
    </script>
  </body>
</html>
